<template>
  <div :style="style">{{ realTime }}</div>
</template>
<script>
import Moment from "moment";
export default {
  props: {
    widget: {
      type: [Object],
      default: () => {},
    },
  },
  data() {
    return {
      render: null,
    };
  },
  computed: {
    style() {
      return {
        width: this.widget.location.width + "px",
        height: this.widget.location.height + "px",
        fontSize: this.widget.option.fontSize + "px",
        fontWeight: this.widget.option.fontWeight,
        color: this.widget.option.color,
        textAlign: this.widget.option.textAlign,
        lineHeight: this.widget.option.lineHeight + "px",
        backgroundColor: this.widget.option.backgroundColor,
      };
    },
    realTime() {
      if (this.widget.option.format) {
        if (this.widget.option.data.value) {
          return Moment(this.widget.option.data.value).format(
            this.widget.option.format
          );
        }
      }
      return "";
    },
  },
  mounted() {
    this.refreshWidgetData();
  },
  destroyed() {
    this.recoveryRenderObject();
  },
  methods: {
    refreshWidgetData() {
      this.widget.option.data.value = new Date().getTime();
      this.render = setInterval(() => {
        this.widget.option.data.value += 1000;
      }, 1000);
    },
    recoveryRenderObject() {
      if (this.render) {
        clearInterval(this.render);
        this.render = null;
      }
    },
  },
};
</script>